import { Row, Col, Spin, Upload, Button, Icon, message } from 'antd';
import { WeaUpload, WeaBrowser, WeaFormItem, WeaError, WeaSelect, WeaTab, WeaTop, WeaDialog, WeaHelpfulTip, WeaLocaleProvider, WeaInput, WeaSteps, WeaRightMenu, WeaNewScroll } from 'ecCom';
import equals from 'deep-equal';
import { WeaTableNew, WeaSwitch, WeaForm } from 'comsMobx';
import { Condition, getAdButtons } from '../list/listCondition';

const WeaTable = WeaTableNew.WeaTable;
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';

const getLabel = WeaLocaleProvider.getLabel;
const Step = WeaSteps.Step;

@inject('contactImpStore')
@observer
export default class ContactImp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  componentDidMount() {
    this.doInit();
  }

    doInit = () => {
      const { contactImpStore, location: { query } } = this.props;
      contactImpStore.doInit(query);
    }

    render() {
      const { contactImpStore } = this.props;
      const { importInitData, errorRefs, spinning, setImpStep, impStep, fileList, showLog, form, logConditionForm, showSearchAd, modifyTableStore } = contactImpStore;
      const formParams = form.getFormParams() || {};
      const operator = toJS(importInitData.operator) ? toJS(importInitData.operator.browserConditionParam) : {};
      const customerId = toJS(importInitData.customerId) ? toJS(importInitData.customerId.browserConditionParam) : {};
      const sellchanceId = toJS(importInitData.sellchanceId) ? toJS(importInitData.sellchanceId.browserConditionParam) : {};
      const icon = ecCom.WeaTools.getIconBGC('crm');
      const tipInfoList = toJS(importInitData.tipInfoList);
      const lis = [];
      if (tipInfoList) {
        tipInfoList.map((info, index) => {
          lis.push(<li style={{ lineHeight: 2 }}>{info}</li>);
        });
      }
      return (
        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@9z1x7y`} height="100%">
          <div>
            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@f1uloi`} tip={getLabel(387846, '正在导入数据，请稍等！')} spinning={spinning}>
              <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@gyvzw9`} datas={this.getRightMenu()} onClick={key => this.onRightMenuClick(key)}>
                <iframe id="downFile" name="downFile" style={{ display: 'none' }} />
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@v25ezq`} className="crm-add-row">
                  <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@48pv19`} span="24" className="crm-add-batch-title">{getLabel(516119, '客户联系导入')}</Col>
                </Row>
                <div className="crm-import-file" style={{ margin: '10px 0', paddingLeft: '28px' }}>
                  <WeaFormItem
                    ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@562aje`}
                    label={getLabel(129833, '导入模板')}
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 8 }}
                  >
                    <div style={{ lineHeight: '30px' }}>
                      <a onClick={() => { setImpStep(1); jQuery('#downFile').attr('src', '/CRM/ContactsToDB.xls'); }}>{getLabel(516120, '客户联系导入模板')}&nbsp;&nbsp;<i className="icon-coms-download2" /></a>
                    </div>
                  </WeaFormItem>

                  <WeaFormItem
                    ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@shnbea`}
                    label={getLabel(16699, 'Excel文件')}
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 8 }}
                  >
                    <WeaError
                      ecId={`${this && this.props && this.props.ecId || ''}_WeaError@s6qizo`}
                      tipPosition="top"
                      style={{ width: 300 }}
                      ref={ref => errorRefs.file = ref}
                      error={getLabel(18618, '请选择要导入的EXCEL文档！')}
                    >
                      <WeaUpload
                        ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@a4c4to`}
                        uploadUrl="/api/crm/common/fileUpload"
                        category="string"
                        viewAttr={3}
                        showOrder={false}
                        editable={false}
                        maxFilesNumber={1}
                        showUploader
                        showUploadTime
                        showClearAll={false}
                        isDetail={false}
                        autoUpload
                        replaceWhenOver
                        onChange={(info, list) => this.fileOnChange(info, list)}
                        multiSelection={false}
                        sortable={false}
                      />

                    </WeaError>
                  </WeaFormItem>

                  <WeaFormItem
                    ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@4cldq5`}
                    label={getLabel(2172, '执行人')}
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 8 }}
                  >
                    <WeaError
                      ecId={`${this && this.props && this.props.ecId || ''}_WeaError@xjjdq3`}
                      tipPosition="top"
                      style={{ width: 300 }}
                      ref={ref => errorRefs.operator = ref}
                      error={`"${getLabel(2172, '执行人')}"${getLabel(21423, '未填写')}`}
                    >
                      <WeaBrowser
                        ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@uzx0hc`}
                        {...operator}
                        onChange={(ids, name, data) => { this.changeBrowser(ids, name, data, 'operator'); }}
                      />
                    </WeaError>
                  </WeaFormItem>

                  <WeaFormItem
                    ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@g61vpb`}
                    label={getLabel(783, '相关客户')}
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 8 }}
                  >
                    <WeaError
                      ecId={`${this && this.props && this.props.ecId || ''}_WeaError@3cvwm8`}
                      tipPosition="top"
                      // ref={ref => this.props.contentStore.errorRefs.customerStatus = ref}
                      style={{ width: 300 }}
                      error={`"${getLabel(783, '相关客户')}"${getLabel(21423, '未填写')}`}
                    >
                      <WeaBrowser
                        ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@qbl8uz`}
                        {...customerId}
                        onChange={(ids, name, data) => { this.changeBrowser(ids, name, data, 'customerId'); }}
                      />
                    </WeaError>
                  </WeaFormItem>

                  <WeaFormItem
                    ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@9zb2oj`}
                    label={getLabel(84372, '相关商机')}
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 8 }}
                  >
                    <WeaError
                      ecId={`${this && this.props && this.props.ecId || ''}_WeaError@ntrh6s`}
                      tipPosition="top"
                      // ref={ref => this.props.contentStore.errorRefs.customerStatus = ref}
                      style={{ width: 300 }}
                      error={`"${getLabel(84372, '相关商机')}"${getLabel(21423, '未填写')}`}
                    >
                      <WeaBrowser
                        ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@x52r24`}
                        {...sellchanceId}
                        onChange={(ids, name, data) => { this.changeBrowser(ids, name, data, 'sellchanceId'); }}
                      />
                    </WeaError>
                  </WeaFormItem>

                  <WeaFormItem
                    ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@7eu87l`}
                    label={getLabel(18596, '导入')}
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 8 }}
                  >
                    <div style={{ lineHeight: '30px' }}>
                      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@oyaw8v`} onClick={() => { this.submitImport(); }} type="primary">{getLabel(25649, '开始导入')}</Button>
                    </div>
                  </WeaFormItem>
                </div>

                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@igfet4`} className="crm-add-row">
                  <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@y3d490`} span="24" className="crm-add-batch-title">{getLabel(27577, '操作步骤')}</Col>
                </Row>
                <WeaSteps ecId={`${this && this.props && this.props.ecId || ''}_WeaSteps@fx96qx`} current={impStep} style={{ margin: '10px 0' }}>
                  <Step ecId={`${this && this.props && this.props.ecId || ''}_Step@dmjjnv`} description={getLabel(28576, '下载模板')} />
                  <Step ecId={`${this && this.props && this.props.ecId || ''}_Step@qakzje`} description={`${getLabel(33010, '填写')}Excel/${getLabel(75, '上传')}`} />
                  <Step ecId={`${this && this.props && this.props.ecId || ''}_Step@ydqaly`} description={getLabel(25649, '开始导入')} />
                  <Step ecId={`${this && this.props && this.props.ecId || ''}_Step@1tckrj`} description={`${getLabel(511369, '内容校验')}/${getLabel(555, '完成')}`} />
                </WeaSteps>

                {/* <Row className="crm-add-row">
                            <Col span="24" className="crm-add-batch-title">{getLabel(85, "说明")}</Col>
                        </Row>
                        <Row className="crm-add-row">
                            <Col span="24" className="crm-add-batch-title">
                                <div style={{ lineHeight: 2 }}><strong>{getLabel(28445, "导入步骤")}：</strong></div>
                                <div style={{ paddingLeft: 43 }}>
                                    <ul>
                                        <li style={{ lineHeight: 2 }}>{getLabel(28447, "第一步，请先")}<a onClick={()=>{contentStore.generateExcel();return false;}} style={{ color: "blue !important", textDecoration: "underline !important" }}>{getLabel(28446, "下载EXCEL文档模版")}</a>，<span style={{ color: "red" }}>{this.convertSpecialChar(getLabel(126071, "调整模板请到\"后端应用中心-客户-基本信息字段设置\"调整导入字段后保存"))}</span>。</li>
                                        <li style={{ lineHeight: 2 }} dangerouslySetInnerHTML={{ __html: getLabel(84295, "第二步，下载后，填写内容，注意，要填写的内容在下边的说明中有详细的说明，请一定要确定你的Excel文档的格式是模板中的格式，而没有被修改掉。") }}></li>
                                        <li style={{ lineHeight: 2 }} dangerouslySetInnerHTML={{ __html: getLabel(84297, "第三步，选择客户经理，默认情况下，客户经理是客户导入者本人。") }}></li>
                                        <li style={{ lineHeight: 2 }} dangerouslySetInnerHTML={{ __html: getLabel(84298, "第四步，可以选择被导入的客户的状态，如果不进行选择，默认情况下导入的客户是无效客户。") }}></li>
                                        <li style={{ lineHeight: 2 }} dangerouslySetInnerHTML={{ __html: getLabel(84300, "第五步，点击右键的提交，进入客户的导入。") }}></li>
                                        <li style={{ lineHeight: 2 }} dangerouslySetInnerHTML={{ __html: getLabel(84302, "第六步，如果以上步骤和Excel文件正确的话，则会被正确的导入，也会出现提示。如果有问题，则根据提示下载Excel并对错误之处进行修改。") }}></li>
                                    </ul>
                                </div>
                            </Col>
                        </Row> */}
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ls4ygr`} className="crm-add-row">
                  <div style={{ lineHeight: 2, color: '#FF0000' }}><strong>{getLabel(15736, '注意事项')}:</strong></div>
                </Row>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@fnzgd9`} className="crm-add-row">
                  <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@rrq2cx`} span="24" className="crm-add-batch-title">
                    <div style={{ paddingLeft: 43 }}>
                      <ul>
                        <li style={{ lineHeight: 2 }}>{getLabel('516121', 'Excel中与表单中，至少一处包含相关客户，如果表单中包含了相关客户，则Excel可不填，如果表单中不含相关客户，则Excel必须包含相关客户，否则校验不通过。') }</li>
                        <li style={{ lineHeight: 2 }}>{getLabel('516122', 'Excel中联系内容、联系途径为必填字段') }</li>
                        <li style={{ lineHeight: 2 }}>{getLabel('516123', 'Excel中相关客户、相关商机、执行人如果不填写，默认为表单中数据')}</li>
                        <li style={{ lineHeight: 2 }}>{getLabel('516124', 'Excel中联系日期、联系时间如果不填写，默认为当前日期和时间') }</li>
                        <li style={{ lineHeight: 2 }}>{getLabel('516125', 'Excel中相关文档、相关项目、相关流程支持多选导入，以英文下逗号（,）分隔') }</li>
                        {/* <li style={{ lineHeight: 2 }}>{getLabel(84290,  "建议一次性导入的客户不要太多，控制在100以内。")}</li> */}
                        {/* <li style={{ lineHeight: 2 }}>{getLabel(389427, "导入时，请确认表格中没有空行，以免导入不成功。")}</li> */}
                      </ul>
                    </div>
                  </Col>
                </Row>
                {/* <Row className="crm-add-row">
                            <div style={{ lineHeight: 2 }}><strong>{getLabel(84303, "按照EXCEL文档中各字段的顺序填写数据，其中红色的部分为必填字段，不能为空！")}</strong></div>
                        </Row> */}
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@haaihk`} className="crm-add-row">
                  <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@77cz8b`} span="12">
                    <div style={{ color: '#FF0000' }}>
                      <div style={{ lineHeight: 2 }}><strong>{getLabel(18019, '必填')}</strong></div>
                      <div style={{ paddingLeft: 43 }}>
                        <ul style={{ listStyleType: 'disc' }}>
                          {lis}
                        </ul>
                      </div>
                    </div>
                  </Col>
                  <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ztq5ha`} span="12" className="crm-add-input" >
                    <div style={{ lineHeight: 2 }}><strong>{getLabel(84305, '错误类型')}</strong></div>
                    <div style={{ paddingLeft: 43 }}>
                      <ul style={{ listStyleType: 'disc' }}>
                        <li style={{ lineHeight: 2 }}>
                          <div style={{ backgroundColor: 'red', display: 'inline', color: 'red' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                          <span style={{ paddingLeft: 5 }}>{getLabel(84306, '数据不允许为为空')}</span>
                        </li>
                        <li style={{ lineHeight: 2 }}>
                          <div style={{ backgroundColor: '#33CCCC', display: 'inline', color: '#33CCCC' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                          <span style={{ paddingLeft: 5 }}>{getLabel(84307, '浏览框输入的信息不存在')}</span>
                        </li>
                        {/* <li style={{ lineHeight: 2 }}>
                                            <div style={{ backgroundColor: "#FF9900", display: "inline", color: "#FF9900" }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                                            <span style={{ paddingLeft: 5 }}>{getLabel(84308, "数据必须为整数")}</span>
                                        </li> */}
                        {/* <li style={{ lineHeight: 2 }}>
                                            <div style={{ backgroundColor: "#99CC00", display: "inline", color: "#99CC00" }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                                            <span style={{ paddingLeft: 5 }}>{getLabel(84309, "数据必须为小数或者整数")}</span>
                                        </li> */}
                        <li style={{ lineHeight: 2 }}>
                          <div style={{ backgroundColor: '#CC99FF', display: 'inline', color: '#CC99FF' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                          <span style={{ paddingLeft: 5 }}>{getLabel(84310, '输入的文字过长')}</span>
                        </li>
                        <li style={{ lineHeight: 2 }}>
                          <div style={{ backgroundColor: 'yellow', display: 'inline', color: 'yellow' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                          <span style={{ paddingLeft: 5 }}>{getLabel(84311, '时间输入有误')}</span>
                        </li>
                        {/* <li style={{ lineHeight: 2 }}>
                                            <div style={{ backgroundColor: "#a1a3a6", display: "inline", color: "#a1a3a6" }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                                            <span style={{ paddingLeft: 5 }}>{getLabel(84312, "下拉框值有误")}</span>
                                        </li> */}
                        {/* <li style={{ lineHeight: 2 }}>
                                            <div style={{ backgroundColor: "#FF8080", display: "inline", color: "#FF8080" }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                                            <span style={{ paddingLeft: 5 }}>{getLabel(84313, "判断值必须填【是】或【否】")}</span>
                                        </li> */}
                        {/* <li style={{ lineHeight: 2 }}>
                                            <div style={{ backgroundColor: "#0000FF", display: "inline", color: "#FF8080" }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                                            <span style={{ paddingLeft: 5 }}>{getLabel(389260, "【更新】操作时客户经理变更")},{getLabel(389435, "按需处理")}</span>
                                        </li> */}
                        {/* <li style={{ lineHeight: 2 }}>
                                            <div style={{ backgroundColor: "#993300", display: "inline", color: "#FF8080" }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                                            <span style={{ paddingLeft: 5 }}>{getLabel(512455, "导入文件中存在重名客户或重名联系人")}</span>
                                        </li> */}
                        {/* <li style={{ lineHeight: 2 }}>
                                            <div style={{ backgroundColor: "#FF00FF", display: "inline", color: "#FF8080" }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                                            <span style={{ paddingLeft: 5 }}>{getLabel(512456, "导入文件中存在联系人所属客户无法找到的情况")}</span>
                                        </li> */}
                      </ul>
                    </div>
                  </Col>
                </Row>

                {/* 日志弹框 */}
                <WeaDialog
                  ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@o2ludc`}
                  onCancel={() => this.props.contactImpStore.showLog = false}
                  visible={showLog}
                  title={getLabel(24835, '导入日志')}
                  style={{ width: 1000, height: 650 }}
                  hasScroll
                  scalable
                  maskClosable
                  {...icon}
                >
                  <WeaTab
                    ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@74abq3`}
                    buttonsAd={getAdButtons(contactImpStore, this.props.ecId || '')}
                    searchType={['advanced']}
                    searchsBaseValue={formParams && formParams.name || ''}
                    setShowSearchAd={(bool) => { contactImpStore.setShowSearchAd(bool); }}
                    hideSearchAd={() => contactImpStore.setShowSearchAd(false)}
                    searchsAd={
                      <div><Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@61fxd9`} listStore={contactImpStore} form={logConditionForm} onEnterSearch={this.onEnterSearch} /></div>
                    }
                    showSearchAd={showSearchAd}
                  />
                  <WeaTable
                    ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@rsg0je`}
                    comsWeaTableStore={modifyTableStore}
                    pagination
                  />

                </WeaDialog>
              </WeaRightMenu>
            </Spin>
          </div>
        </WeaNewScroll>
      );
    }
    fileOnChange = (info, list) => {
      const { importFileInfo, setImpStep } = this.props.contactImpStore;
      const fileList = { fileId: info };
      importFileInfo(fileList);
      setImpStep(2);
    }
    changeBrowser = (ids, name, data, type) => {
      const { saveImportData, saveImportInitData, importInitData } = this.props.contactImpStore;
      saveImportData({ [type]: ids });
      saveImportInitData(ids, name, type);
      if (type === 'sellchanceId' && data[0] && data[0].customerid) {
        // 变更商机，自动带出客户
        saveImportData({ customerId: data[0].customerid });
        saveImportInitData(data[0].customerid, data[0].customeridspan, 'customerId');
      } else if (type === 'customerId') {
        // 变更客户，清空商机，并且设置商机浏览按钮默认条件为当前客户
        saveImportData({ sellchanceId: null });
        // saveImportInitData(null,  null, "sellchanceId");
        importInitData.sellchanceId.browserConditionParam.dataParams = { customer: ids };
        importInitData.sellchanceId.browserConditionParam.replaceDatas = [];
      }
    }

    submitImport = () => {
      const { submitImport } = this.props.contactImpStore;
      submitImport();
    }

    convertSpecialChar = (str) => {
      str = str.toString();
      str = str.replace(/<br>/ig, '\n');
      str = str.replace(/&amp;/ig, '&');
      str = str.replace(/&nbsp;/ig, ' ');
      str = str.replace(/&lt;/ig, '<');
      str = str.replace(/&gt;/ig, '>');
      str = str.replace(/&quot;/ig, '"');
      return str;
    }

    getRightMenu = () => {
      const btns = [];
      btns.push({
        icon: <i className="icon-coms-Approval " />,
        content: getLabel(514575, '开始导入'),
        key: 0,
      });
      btns.push({
        icon: <i className="icon-coms-Print-log " />,
        content: getLabel(83, '日志'),
        key: 1,
      });

      return btns;
    }

    onRightMenuClick = (key) => {
      const { contactImpStore } = this.props;
      if (key == '0') { // 开始导入
        contactImpStore.submitImport();
      }
      if (key == '1') { // 查看日志
        contactImpStore.initDatas({ category: 3 });
        contactImpStore.getLog({ category: 3 });
        contactImpStore.showLog = true;
      }
    }

    onEnterSearch=() => {
      const { contactImpStore } = this.props;
      contactImpStore.doSearch();
      contactImpStore.setShowSearchAd(false);
    }
}
